<template>
  <div>
    <van-nav-bar title="资金记录" left-arrow @click-left="goBack"></van-nav-bar>
    <!-- 无交易 -->
    <div class="no-deal" v-show="flagBtm">
      <div>
        <img src="../../assets/images/icon-record-gray@2x.png" alt>
        <p>暂无交易记录</p>
      </div>
    </div>

    <div class="chose">
      <div @click="show=!show">
        <span>{{nameOne}}</span>
        <img style="width:15%" src="../../assets/images/icon-arrow-down.png" alt>
      </div>
      <div @click="showOne=!showOne">
        <span>{{nameTwo}}</span>
        <img style="width:15%" src="../../assets/images/icon-arrow-down.png" alt>
      </div>
      <div @click="showTwo=!showTwo">
        <span>{{nameThree}}</span>
        <img style="width:15%" src="../../assets/images/icon-arrow-down.png" alt>
      </div>
    </div>
    <div class="chose-list" @touchstart="onClose">
      <div>
        <!-- 分币列表 -->
        <transition name="slide-fade">
          <div v-show="show">
            <p @click="coinChose(item.id,item.virtual_wallet_name)" v-for="(item,index) in getFenBis" :key="index">{{item.virtual_wallet_name}}</p>
          </div>
        </transition>
      </div>
      <div>
        <!-- 转入 -->
        <transition name="slide-fade">
          <div v-show="showOne">
            <p @click="getYiaoYiId(index,item)" v-for="(item,index) in cate" :key="index">{{item}}</p>
          </div>
        </transition>
      </div>
      <div>
        <!-- 时间 -->
        <transition name="slide-fade">
          <div v-show="showTwo">
            <p @click="getDataSearch(item)" v-for="(item,index) in getMonths" :key="index">{{item}}</p>
          </div>
        </transition>
      </div>
    </div>
    <div class="contain" @touchstart="onClose" v-for="(item,index) in getPageList" :key="index">
      <div class="contain-list" v-if="item.type==6?false:true">
        <div>
          <span><img style="width:100%" src="../../assets/images/icon-out.png" alt=""></span>
        </div>
        <div>
          <p>
            <span>{{item.record_name}}</span>
            <span>+{{item.turnover_amount}}</span>
          </p>
          <p>
            <span>{{item.create_time}}</span>
            <span></span>
          </p>
        </div>
      </div>
      <div class="contain-list" v-else>
        <div>
          <span style="color:#D1A568"><img style="width:100%" src="../../assets/images/icon-enter.png" alt=""></span>
        </div>
        <div>
          <p>
            <span>{{item.record_name}}</span>
            <span style="color:#D1A568">-{{item.turnover_amount}}</span>
          </p>
          <p>
            <span>{{item.create_time}}</span>
            <span style="color:#D1A568"></span>
          </p>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <p v-show="flagbtm" style="font-size:10px;color:#ccc;margin-top:10px;padding-bottom:10px">没有了！！！</p>
  </div>
</template>
<script>
import { coinType,getMonth,recordList } from "../../axios/api.js";
import { NavBar } from "vant";
export default {
  name: "capitalRecord",
  data() {
    return {
      flagBtm:false,
      show: false,
      showOne: false,
      showTwo: false,
      getFenBis: "",
      getMonths:"",
      getPageList:[],
      downNum:"1",
      cate:[
        "转出","转入"
      ],
      flagbtm:false,
      coinId:null,
      jiaoYiId:null,
      dataId:null,
      nameOne:'币种',
      nameTwo:'交易类型',
      nameThree:'日期'
    };
  },
  components: {
    [NavBar.name]: NavBar
  },
  created(){
    this.getFenBi();
    this.getData();
    this.getJiaoYiJlu();
    this.downUp();
  },
  methods: {
    //返回
    goBack() {
      this.$router.go(-1);
    },
    //返回
    onClose() {
      var that = this;
      that.show = false;
      that.showOne = false;
      that.showTwo = false;
    },
    //获取分币
    getFenBi(){
      //获取币分类列表
      var that = this;
      coinType()
        .then(res => {
          console.log(res.data);
          that.getFenBis = res.data.data
        })
        .catch(function(err) {});
    },
    //获取日期
    getData(){
      var that = this;
      getMonth()
        .then(res => {
          console.log(res.data)
          that.getMonths = res.data.data
        })
        .catch(function(err){})
    },
    //获取交易记录
    getJiaoYiJlu(){
      var that = this;
      var getParams = {
        token: sessionStorage.getItem("token"),
        page: that.downNum,
        rows: 10,
        virtualWalletId: that.coinId,
        tradeType:that.jiaoYiId,
        createDate:that.dataId,
      };
      recordList({
        params:getParams
      })
        .then(res => {
          if(res.data.data.length<=0){
            that.flagBtm = true;
            return false;
          }else{
            that.flagBtm = false;
            console.log(res.data.data,88888)
            that.getPageList = res.data.data
          }
         
        })
        .catch(function(res){})
    },
    //上拉加载
    downUp(){
      var that = this;
      var startX, startY, endX, endY, X, Y;
      $("body")
        .on("touchstart", function(e) {
          var touch = e.originalEvent.targetTouches[0];
          startX = touch.pageX;
          startY = touch.pageY;
        })
        .on("touchend", function(e) {
          var touch = e.originalEvent.changedTouches[0];
          endX = touch.pageX;
          endY = touch.pageY;
          X = endX - startX;
          Y = endY - startY;
          if (Y < -30) {
            that.downNum++;
            var getParams = {
              token: sessionStorage.getItem("token"),
              page: that.downNum,
              rows: 10,
              virtualWalletId: that.coinId,
              tradeType:that.jiaoYiId,
              createDate:that.dataId,
            };
            recordList({
              params:getParams
            })
            .then(res => {
              console.log(res.data.data)
             
              if(res.data.data.length==0){
                that.flagbtm = true;
                return false;
              }else{
                 for(var i=0; i<res.data.data.length;i++){
                that.getPageList.push(res.data.data[i]);
              }
              }
            })
            .catch(function(res){})
          }
        });
    },
    //币种筛选
    coinChose(id,name){
      this.coinId = id;
      console.log(this.coinId)
      this.downNum=1;
      this.jiaoYiId = null;
      this.dataId = null;
      this.getJiaoYiJlu();
      this.flagbtm = false;
      this.nameOne = name;
      this.nameTwo = "交易类型";
      this.nameThree = "日期"
    },
    //交易类型
    getYiaoYiId(id,name){
      this.jiaoYiId = id;
      console.log(this.jiaoYiId)
      this.downNum=1;
      this.getJiaoYiJlu()
      this.flagbtm = false;
      this.nameTwo = name;
    },
    //获取时间
    getDataSearch(id){
      this.dataId = id;
      this.nameThree = id;
      console.log(this.dataId)
      console.log(this.createDate)
      this.downNum=1;
      this.getJiaoYiJlu()
      this.flagbtm = false;
    },


  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.no-deal {
  width: 100%;
  height: 95vh;
  position: fixed;
  left: 0;
  top: 96px;
  background-color: #fff;
  div {
    width: 30%;
    margin: 20vh auto 0;
    img {
      width: 70%;
    }
    p {
      font-size: 12px;
      text-align: center;
      color: #666;
    }
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(10px);
  opacity: 0;
}

.chose {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  height: 40px;
  font-size: @base_textSize;
  border-bottom: 10px solid #eee;
  > div {
    width: 33.33%;
    display: flex;
    justify-content: center;
    align-items: center;
    > img {
      width: 18%;
    }
  }
}
.chose-list {
  position: fixed;
  left: 0;
  top: 90px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-size: @base_textSize;
  > div {
    width: 33.33%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
    div {
      background-color: #fff;
      width: 100%;
      border: 1px solid #eee;
      p {
        padding: 6px;
        border-bottom: 1px solid #eee;
      }
    }
  }
}
.contain {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  .contain-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    color: red;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    > div:nth-child(1) {
      width: 5%;
      color: red;
    }
    > div:nth-child(2) {
      width: 95%;
      color: red;
      p:nth-child(1),
      p:nth-child(2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 4px;
        box-sizing: border-box;
        font-size: 13px;
      }
      p:nth-child(1) {
        span:nth-child(1) {
          color: #333;
          font-weight: bold;
        }
      }
      p:nth-child(2) {
        margin-top: 4px;
        font-size: 10px;
        span:nth-child(1) {
          color: #999;
        }
      }
    }
  }
}
</style>
